<script lang="ts" setup>
import { reactive } from 'vue'
import Tags from './component/Tags.vue'
import { getKindPlayList } from '@/api/song'
import type { TagPlaylist } from '@/types/song'
import CoverMark from '@/components/cover-mark/coverMark.vue'

const state = reactive({
  page: 1,
  limit: 20,
  loading: false,
  hasMore: false,
  tag: '全部',
  before: 0, //上一页最后一个歌单的 updateTime 获取下一页数据
  list: [] as TagPlaylist[],
})

const toggleTag = (tag: string) => {
  state.tag = tag
  state.before = 0
  getPlaylist()
}

const getPlaylist = async () => {
  const params = {
    cat: state.tag,
    limit: state.limit,
    before: state.before,
  }
  const { data } = await getKindPlayList(params)
  if (data.code !== 200) return ElMessage.error('获取失败')
  const { lasttime, more, playlists, total } = data
  state.before = lasttime
  state.hasMore = more
  state.list = playlists
}

getPlaylist()
</script>

<template>
  <div>
    <Tags @toggle-tag="toggleTag" :current-tag="state.tag" />
    <div class="py-5 text-xl font-bold">{{ state.tag }}歌单</div>
    <div class="grid gap-5 grid-cols-3 lg:grid-cols-5 2xl:grid-cols-7 text-xs">
      <div v-for="item in state.list" :key="item.id">
        <CoverMark :pic-url="item.coverImgUrl" :play-count="item.playCount" />
        <div class="leading-5">{{ item.name }}</div>
        <div class="truncate text-slate-500 text-dc">{{ item.creator?.nickname }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
